import '../styles/index.scss'

import React from "react"
import { Link } from "gatsby"
import { allProductLabels } from '../utils/menu_config'
import { FormattedMessage } from 'react-intl'

import Layout from "../components/layout"
import Seo from "../components/seo"

const IndexPage = ({ pageContext }) => {
  const { lang } = pageContext

  const menuKeys = [
    ['mogdb-stack', 'manager', 'mogha'],
    ['mogeaver', 'ptk', 'parameter'],
    ['mtk', 'mdb', 'sca', 'mvd']
  ]

  const getMenus = (arr) => {
    return <>
      {arr.map((k, i) => (
        <div className={`product-box ${allProductLabels[k].disabled ? 'disabled' : ''} ${i === menuKeys[0].length - 1 ? 'no-bottom' : ''}`} key={i}>
          <div className="desc">{allProductLabels[k]['alias' + lang] || allProductLabels[k][lang]}</div>
          <div className="title-box">
            <div className={`${k} ${allProductLabels[k].disabled ? 'disabled' : ''} w-product-icon-yellow `}></div>
            <Link to={allProductLabels[k].isExternalLink ? `${allProductLabels[k].link}&lang=${lang}` : `/${lang}/${allProductLabels[k].link || k}/`} target={allProductLabels[k].isExternalLink ? '_blank' : '_self'} className="title">{allProductLabels[k].label || allProductLabels[k][lang]}</Link>
          </div>
        </div>
      ))}
    </>
  }

  return (
    <Layout pageContext={pageContext}>
      <Seo
        pageContext={pageContext}
        title="MogDB Docs"
        description="{frontmatter.summary}" />
      <article className="index-container">
        <div className="banner-box">
          <h1 className="title"><FormattedMessage id="index.pageTitle" /></h1>
          <p className="description"><FormattedMessage id="index.pageDescription" /></p>
        </div>
        <div className="menu-container">
          <div className="logo">MogDB</div>
          <div className="left-box">
            <p className="introduction"><FormattedMessage id="index.mogdbDescription" /></p>
            <Link className="link" to={`/${lang}/mogdb/`}><FormattedMessage id="index.mogdbLink" />  →</Link>
          </div>
          <div className="right-box">
            <div>
              {getMenus(menuKeys[0])}
            </div>
            <div>
              {getMenus(menuKeys[1])}
            </div>
          </div>
        </div>
        <h2 className="box-title"><FormattedMessage id="index.migrateTitle" /></h2>
        <div className="migrate-container">
          <div className="left-box">
            {getMenus(menuKeys[2])}
          </div>
          <div className="right-box"></div>
        </div>
      </article>
    </Layout>
  )
}
export default IndexPage

